<template>
	<view class="dingdan">
		<view class="a">
			<view class="al">
				<view class="alu">
					<block v-if="order.state==1">等待买家付款</block>
					<block v-if="order.state==2">等待商家发货</block>
					<block v-if="order.state==3">商家已发货</block>
					<block v-if="order.state==4">交易成功</block>
				</view>
				<view class="ald">
					<block v-if="order.state==1">14分钟59秒后未支付，订单将自动删除</block>
					<block v-if="order.state==2">您的商品打包中，请耐心等候哦</block>
					<block v-if="order.state==3">您的商品已在运送图中</block>
					<block v-if="order.state==4">买家已确认收获</block>
				</view>
			</view>
			<view class="ar">
				<image src="/static/dingdan_imgs/qie.png" mode="heightFix" style="height: 74px;width: 54px;"></image>
			</view>
		</view>
		<view class="b">
			<view class="bl">
				<image src="/static/dingdan_imgs/loc.png" mode="heightFix" style="height: 24px;width: 15px;"></image>
			</view>
			<view class="br">
				<view class="bru">
					<view class="brul">
						收货人:摸鱼酱
					</view>
					<view class="brur">
						18226180501
					</view>
				</view>
				<view class="brd">
					收货地址:上海上海市闵行区浦江镇江龙路满香园4号902室
				</view>
			</view>
		</view>
		<view class="line">
			<image src="/static/dingdan_imgs/line.png" mode="heightFix" style="height: 5px;"></image>
		</view>


		<!-- 中间图片和介绍 -->
		<view class="c">
			<!-- 左边图片 -->
			<view class="body-middle-left">
				<image :src="order.src"></image>
			</view>
			<!-- 右边介绍 -->
			<view class="body-middle-right">
				<!-- 商品名 -->
				<view class="body-middle-right-name">{{order.name}}</view>
				<view class="body-middle-right-price">
					<view class="body-middle-right-price1">{{order.price}}</view>
					<view class="body-middle-right-price2">×1</view>
				</view>
			</view>
		</view>
		<!-- 下方操作按钮 -->
		<block v-if="order.state==2">
			<view class="button">
				<block v-if="order.refund==false">
					<view class="button1" @click="refund">申请退款</view>
				</block>
				<block v-if="order.refund==true">
					<view class="button2" @click="refundCancle">取消退款</view>
					<view class="button1">退款中</view>
				</block>
			</view>
		</block>

		<view class="d">
			<view class="dl">
				配送方式
			</view>
			<view class="dr">
				快递 配送
			</view>
		</view>
		<view class="e">
			<view class="el">
				我的留言:尽快发货!
			</view>
		</view>
		<view class="f">
			<view class="fl">
				快递配送费:0<br>
				优惠券折扣:0<br>
				积分抵扣:0
			</view>
		</view>
		<view class="g">
			<view class="gr">
				实际应付:188.9元
			</view>
		</view>
		<view class="h">
			<view class="hl">
				订单编号:201704251144926<br>
				订单创建时间:2017-04-2511:46
			</view>
		</view>

		<view class="fix">
			<block v-if="order.state==1">
				<view class="lxsj">联系商家</view>
				<view class="qxdj">取消订单</view>
				<view class="fk">付款</view>
			</block>
			<block v-if="order.state==2">
				<view class="qxdj">联系商家</view>
				<view class="fk">催单</view>
			</block>
			<block v-if="order.state==3">
				<view class="lxsj">联系商家</view>
				<view class="qxdj">取消订单</view>
				<view class="fk">确认收货</view>
			</block>
			<block v-if="order.state==4">
				<view class="lxsj">联系商家</view>
				<view class="qxdj">配送信息</view>
				<view class="fk">评价</view>
			</block>
		</view>
		<view style="width: 100vw;height:48px">

		</view>
	</view>



</template>

<script>
	var that
	var orderList = getApp().globalData.dingdanList
	export default {
		data() {
			return {
				order: null
			}
		},
		methods: {
			refund() {
				let id = this.order.id
				console.log(this.order)
			},
			refundCancle() {
				that = this
				wx.showModal({
					title: '取消退款',
					content: '确定要取消退款吗？',
					success(res) {
						if (res.confirm) {
							that.order.refund = false
							console.log(that.order)
							orderList.forEach(item => item.id == that.order.id ? item.refund = false : '')
							setTimeout(function() {
								wx.showToast({
									title: '取消成功',
									icon: 'success',
									duration: 1000
								});
							}, 100)
						}
					}
				})

			}
		},
		onLoad(options) {
			let orderId = options.orderId
			// this.order=orderList.filter(item => item.id==orderId)
			orderList.forEach(item => item.id == orderId ? this.order = item : '')
		}
	}
</script>

<style lang="scss">
	.dingdan {}

	.a {
		height: 180rpx;
		// background-color: coral;
		background: linear-gradient(to right, orange, red);
		display: flex;
	}

	.al {}

	.alu {
		font-size: 24rpx;
		color: white;
		position: absolute;
		left: 40rpx;
		top: 44rpx;
	}

	.ald {
		font-size: 24rpx;
		color: white;
		position: absolute;
		left: 40rpx;
		top: 94rpx;
	}

	.ar {
		position: absolute;
		left: 562rpx;
		top: 20rpx;
	}

	.b {
		height: 182rpx;
		position: relative;
		background-color: white;
	}

	.bl {
		position: absolute;
		left: 24rpx;
		top: 100rpx;
	}

	.bru {
		display: flex;
	}

	.brul {
		font-size: 30rpx;
		position: absolute;
		left: 80rpx;
		top: 30rpx;
	}

	.brur {
		font-size: 28rpx;
		position: absolute;
		left: 476rpx;
		top: 30rpx;
	}

	.brd {
		font-size: 28rpx;
		position: absolute;
		left: 80rpx;
		top: 100rpx;
	}

	.line {
		padding: 0vw 0 3vw 0;
		margin: -2vw 0 0 0;
	}

	.c {
		display: flex;
		padding-left: 3vw;
	}

	.body-middle-left image {
		margin-right: 5vw;
		width: 20vw;
		height: 20vw;
	}

	.body-middle-right-name {
		width: 70vw;
		height: 10vw;
	}

	.body-middle-right-price {
		width: 70vw;
		height: 10vw;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.body-middle-right-price1 {
		font-size: 4vw;
		font-weight: 700;
	}

	.body-middle-right-price2 {
		margin: 0 2vw 0 0;
	}

	.button {
		display: flex;
		justify-content: flex-end;
		font-size: 3vw;
	}

	.button1 {
		margin: 1vw 2vw 2vw 1vw;
		border-radius: 10px;
		padding: 1vw 1vw 1vw 1vw;
		border: 1px solid #00000060;
	}

	.button2 {
		margin: 1vw 2vw 2vw 1vw;
		border-radius: 10px;
		padding: 1vw 1vw 1vw 1vw;
		color: #fff;
		border: 1px solid #00000060;
		background-color: #00000060;
	}

	.d {
		position: relative;
		border-top: 1px gainsboro solid;
		height: 88rpx;
		background-color: white;
	}

	.dl {
		font-size: 24rpx;
		position: absolute;
		left: 12px;
		top: 30rpx;
		align-items: center;
	}

	.dr {
		font-size: 24rpx;
		position: absolute;
		right: 24rpx;
		top: 30rpx;
		align-items: flex-end;
	}

	.e {
		border-top: 1px gainsboro solid;
		height: 88rpx;
		background-color: white;
		position: relative;
	}

	.el {
		font-size: 12px;
		position: absolute;
		left: 12px;
		top: 15px;
	}

	.f {
		position: relative;
		border-top: 1px gainsboro solid;
		height: 90px;
		background-color: white;
		font-size: 12px;
	}

	.fl {
		font-size: 12px;
		position: absolute;
		left: 12px;
		top: 15px;
		line-height: 20px;
	}

	.g {
		position: relative;
		border-top: 1px gainsboro solid;
		height: 44px;
		background-color: white;
	}

	.gr {
		font-size: 14px;
		position: absolute;
		right: 20px;
		top: 15px;
		color: coral;
	}

	.h {
		position: relative;
		border: 1px gainsboro solid;
		height: 56px;
		background-color: white;
		margin-top: 5px;
	}

	.hl {
		font-size: 12px;
		position: absolute;
		left: 10px;
		top: 10px;
		line-height: 20px;
	}

	.fix {
		position: fixed;
		height: 96rpx;
		width: 750rpx;
		background-color: white;
		bottom: 0;
		display: flex;
	}

	.lxsj {

		position: absolute;
		top: 10rpx;
		left: 286rpx;
		height: 60rpx;
		width: 148rpx;
		background-color: white;
		border: 1px gainsboro solid;
		border-radius: 60rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.qxdj {

		position: absolute;
		top: 10rpx;
		left: 454rpx;
		height: 60rpx;
		width: 148rpx;
		background-color: white;
		border: 1px gainsboro solid;
		border-radius: 60rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 60rpx;

	}

	.fk {
		position: absolute;
		top: 10rpx;
		left: 622rpx;
		height: 60rpx;
		width: 108rpx;
		background-color: white;
		border: 1px gainsboro solid;
		border-radius: 60rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 60rpx;
		background-color: orange;
		color: white;
	}
</style>
